<template>
    <div class="expense">
        <h1 class="f35 pr">
            <router-link class="img pa cfff" to="/mine" style="left: 20rem">
                <i class="el-icon-arrow-left  f40 " ></i>
            </router-link>   
        消费记录</h1>
        <main class="p20">
            <section class="bcfff mb20">
                <ul class="info ">
                  <li class="mt40 flex jcsa" v-for=" el in arr">
                    <div>
                        <h2 class="fn f30 mb30">{{el.businessName}}-{{el.serviceItem}}</h2>
                        <p class="c808  f25">{{ onFormat(el.createdDate) }}</p>
                    </div>
                    <span class="asc f25">-{{el.currentPrice}}元</span>
                  </li>
                </ul>
            </section>
        </main>
    </div>
</template>
<script>
import {Record} from '@/api/myCard'
export default {
    mounted(){
        Record({
            userId:1
        }).then(r=>{
            this.arr = r.data
            console.log(this.arr);
        })
    },
    data(){
        return {
            arr:[]
        }
    },
    methods:{
        onFormat(time){//修改时间格式
            let t= time.substr(0,10).split('-').join('.');
            let d = new Date(time);
            let res = t+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            console.log(res);
            return res;
        }
    }
}
</script>
<style scoped>
.asc{align-self:center;}
.c808{color: #808080;font-size: 25rem;}
main{margin-bottom: 25rem;}
main section{padding: 40rem 30rem;border-radius: 20rem;box-sizing: border-box;} 
main section ul li{border-bottom: 7rem solid #f7f7f7;padding-bottom: 40rem;} 
main section ul li:last-child{border-bottom: none;padding-bottom:0} 
.expense{
    background-color: #3385fc;
    height: 354rem;
}
h1 {
  display: flex;
  font-weight: 370;
  color: white;
  width: 100%;
  height: 115rem;
  align-items: center;
  justify-content: center;
}
h1+div{
    background-color: white;
    width: 92%; 
    margin:15rem auto;
    border-radius:15rem ;
  }
</style>